<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="">
  <title>webpack</title>
  <script>
    const WIDTH = 750; // 定义设计稿宽度
    // 通过meta标签的content的initial-scale达到移动端适配
    const setViewport = function () {
      //  计算呢屏幕宽度和设计稿比例
      let scale = window.screen.width / WIDTH;
      // 获取元素
      let meta = document.querySelector('meta');
      let content = `width=${WIDTH},initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale},maximum-scale=${scale},minimum-scale=${scale},user-scalable=no`
      // 判断是否存在
      if (!meta) {
        meta = document.createElement('meta');
        meta.setAttribute('name', 'viewport');
        document.head.appendChild(meta)
      }
      meta.setAttribute('content', content);
    }
    setViewport();

    // 监听屏幕变化
    window.addEventListener('resize', setViewport);
    // 监听翻转事件
    window.addEventListener('orientationchange', setViewport)
  </script>
</head>

<body>
  <div id="app">

  </div>
</body>

</html>